<template>
  <div class="cmp-text-emr-previewer">
    <div v-for="item in textContent" :key="'emr_text_content__' + item.name">
      <h4 class="header">
        {{ item.name }}
        <el-button
          type="info"
          size="default"
          class="copy-btn"
          @click="handleCopyClick(item.value)"
        >
          复制
        </el-button>
      </h4>
      <pre class="text-content">{{ item.value }}</pre>
    </div>
  </div>
</template>
<script>
  import { computed } from '@vue/runtime-core'
  import common from '@/utils/common'
  export default {
    props: { data: Object },
    setup(props) {
      // 需要过滤的map
      const filterMap = { 辅助检查图片: '辅助检查图片' }
      const textContent = computed(() => {
        return (
          props.data &&
          props.data
            .map((item) => {
              return { name: item.model, value: item.text }
            })
            .filter((item) => !filterMap[item.name])
        )
      })

      const handleCopyClick = function (msg) {
        common.XmCopy(msg)
        common.XmMessage(0, '复制成功!')
      }
      return {
        textContent,
        handleCopyClick,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .cmp-text-emr-previewer {
    background-color: #fff;
    padding: 0px 12px 12px;
    overflow: hidden;
    .header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    .text-content {
      color: #666;
      background-color: #f2f2f2;
      padding: 12px;
      word-break: break-word;
      word-wrap: break-word;
      white-space: pre-line;
      border-radius: 5px;
    }

    .copy-btn {
      margin-left: 20px;
    }
  }
</style>
